<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="专辑" name="first"
      ><div v-if="activeName === 'first'"><Album /></div
    ></el-tab-pane>
    <el-tab-pane label="MV" name="second"
      ><div v-if="activeName === 'second'"><MV /></div
    ></el-tab-pane>
    <el-tab-pane label="歌手详情" name="third"
      ><div v-if="activeName === 'third'"><Item /></div
    ></el-tab-pane>
    <el-tab-pane label="相似歌手" name="fourth"
      ><div v-if="activeName === 'fourth'"><Res /></div
    ></el-tab-pane>
  </el-tabs>
</template>

<script>
import Album from './album.vue';
import MV from './artistsMv.vue';
import Item from './artistsItem.vue';
import Res from './resArtists.vue';
import { mapState } from 'vuex';

export default {
  components: {
    Album,
    MV,
    Item,
    Res,
  },
  computed: {
    ...mapState(['resArtists']),
  },
  watch: {
    resArtists(newVal, oldVal) {
      this.activeName = 'first';
    },
  },
  data() {
    return {
      activeName: 'first',
    };
  },
};
</script>

<style>
</style>
